<template>
    <div class="checkbox_wrap">
        <div class="checkbox"  :class='{checked:value}'  @click='tab'></div>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                selfActive: this.value
            }
        },
        props: ['value', 'noEdit'],
        mounted() {
            this.$emit('change', this.selfActive)
        },
        watch: {
            value(newValue, oldValue) {
                this.selfActive = newValue
            }
        },
        methods: {
            tab() {
                if (this.noEdit) return;
                this.selfActive = !this.selfActive;
                this.$emit('input', this.selfActive);
                this.$emit('select', this.selfActive);
            }
        }
    }
</script>
<style scoped>
    .activeTabwrap>div {
        width: 100px;
        height: 100px;
        border: 1px solid
    }
    
    .checbox {
        background: #fff
    }
    
    .active {
        background: red
    }
</style>